<template>
  <div class="mine">
    <div class="login">
      <div class="login-top">
        <div class="lt-left">
          <div class="user-login">
            <van-image round width="1.6rem" height="1.6rem" :src="require('../../assets/user-portraits/default_avatar.jpeg')" />
          </div>
          <div class="youke-div" v-if="token">
            <p class="youke">游客</p>
            <div class="btn-login-register">
              <van-button class="btn-login-register" type="primary" round size="mini" color="#534e63" to="user">登录/注册</van-button>
            </div>
          </div>
          <div class="username" v-else>{{ username }}</div>
        </div>
        <div class="shezhi">
          <van-icon name="setting-o" size="1.5em" color="white" />
        </div>
      </div>
      <div class="vip">
        <p class="vip-font">VIP会员</p>
        <!-- <p class="vip-font2">开通即享受会员特权</p> -->
        <p class="vip-font2">开通即享受会员特权</p>
        <!-- <van-button color="#6f4718" size="mini">立即抢购</van-button> -->
        <div class="vip-btn">
          <van-button color="#6f4718" size="mini">立即抢购</van-button>
        </div>
      </div>
    </div>

    <div class="cell">
      <van-cell-group inset>
        <van-cell title="课程权益" is-link value="查看全部" to="coursecard">
          <template #label>
            <div id="buysubject">
              <van-icon name="add-o" size="48" class="add-o" click="" /><br />
              <div>购买课程</div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group inset>
        <van-cell title="邀请好友" icon="friends-o" value="领免费会员" value-class="value1" is-link to="invitefriends" />
        <van-cell title="实体卡兑换" icon="idcard" is-link to="redeemvipcard" />
        <van-cell title="我的订单" icon="description" is-link to="myorder" />
        <van-cell title="我的优惠券" icon="gold-coin-o" is-link to="MyCoupon" />

        <van-cell title="我的余额" icon="pending-payment" is-link to="#" />
        <van-cell title="自动续费管理" icon="cash-back-record" is-link to="#" />
        <van-cell title="联系客服" icon="service-o" is-link to="#" />
      </van-cell-group>
    </div>
    <!-- <van-image width="300" height="300" src="/1.png" /> -->
  </div>
</template>

<script>
export default {
  name: 'Mine',

  data() {
    return { username: '洛克er-982AC4' }
  },

  mounted() {},

  methods: {},
  computed: {
    token() {
      return this.$store.state.tokenInfo.length == 0
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.login {
  width: 100%;
  background-color: #534e63;
  .login-top {
    display: flex;
    justify-content: space-between;
    padding-top: 85px;
    margin: 0 20px;
    padding-bottom: 10px;
    .lt-left {
      display: flex;
      .youke-div {
        margin-left: 12px;
      }
    }
  }
}
.vip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  width: 335px;
  background-color: #fcd39f;
  margin: 0 auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 6px 0px;
}
.youke {
  color: white;
  font-size: 20px;
}
.btn-login-register .van-button {
  border-color: white !important;
  padding: 4px 10px;
}
.username {
  font-size: 22px;
  color: #fff;
  padding: 12px;
}
p.vip-font {
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
  background-image: -webkit-linear-gradient(right, #b5864c, #6f4718);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 12px;
}

p.vip-font2 {
  font-size: 12px;
  margin-left: 22px;
  color: #6f4718;
}
.vip .van-button {
  margin-right: 12px;
  padding: 14px;
}
.value1 {
  color: #ff6040;
}
.van-cell-group--inset {
  margin: 8px 20px;
}
#buysubject {
  padding: 10px;
  > div {
    margin-top: 8px;
  }
}
</style>
